<template>
    <div>
        <van-tabs v-model="active" @click="tabsClick()" title-active-color="#5ca1ee" color="#5ca1ee">
            <van-tab :title="item.name" v-for="(item,index) in classTab" :key="index">
                <ul class="clearfix guide-ul">
                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <router-link tag="li" :to="{name:'guideDetail',query:{id:item.id}}" class="clearfix guide-li b-g-f" v-for="(item,index) in list" :key="index">
                            <div class="guide-li-left clearfix">
                                <span class="guide-li-left-title">{{item.post_title}}</span>
                                <span class="guide-li-left-name">{{item.post_source}}</span>
                                <span class="guide-li-left-date">{{$time(item.published_time)}}</span>
                            </div>
                            <img class="guide-img" :src="item.thumbnail" alt="" srcset="">
                        </router-link> 
                    </van-list>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
export default {
    data(){
        return{
            active:0,
            classTab:[],
            list:[],
            page:0,
            loading: false,
            finished: false
        }
    },
    mounted(){
        this.getCategoryList()
    },
    methods:{
        onLoad(){
            this.page++
            this.articleIndex(this.active + 1)
        },
        // 分类
        getCategoryList(){
            this.$api.guide.getCategoryList().then(resp=>{
                if(resp.code == 1){
                    this.classTab = resp.data
                }
            })
        },
        // 切换
        tabsClick(){
            this.list = []
            this.page = 0
            this.finished = false
        },
        //  分类列表
        articleIndex(id){
            this.$api.guide.articleIndex({category_id:id,page:this.page}).then(resp=>{
                if(resp.code == 1){
                    this.loading = false
                    if(resp.data.length > 0){
                        resp.data.forEach(e=>{
                            this.list.push(e)
                        })
                    }else{
                        this.finished = true
                    }
                }
            })
        } 
    }
}
</script>
<style lang="less" scoped>
.guide-ul{
    margin-top: 30px;
    .guide-li{
        padding: 30px;
        display: block;
        border-bottom:solid 1px #f5f5f5;
        .guide-img{
            float: right;
            width: 270px;
            border-radius: 10px;
        }
        .guide-li-left{
            overflow: hidden;
            float: left;
            width: calc(100% - 320px);
            color: #999;
            font-size: 34px;
            .guide-li-left-title{
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                display: block;
                padding-top: 40px;
                padding-bottom: 30px;
                font-size: 46px;
                color: #222;
            }
            .guide-li-left-name{
                display: block;
                line-height: 50px;
            }
        }
    }
}
</style>


